<template>
  <div class="bigbox">
    <h2>待办事项</h2>
    <div class="box">
      <!-- 头部 -->
      <div class="header">
        <input
          class="i1"
          type="text"
          v-model="icheck"
          placeholder="请输入您的待办事项,回车后即可添加哟"
          @keyup.enter="addCheck"
        />
        <span style="color: red">{{ prompt }}</span>
      </div>
      <!-- 事项区 -->
      <div class="backlog">
        <ul>
          <li
            v-for="(backlog, index) in filterBacklogs"
            :key="backlog.id"
            @mouseenter="showdel(index)"
            @mouseleave="hidddel(index)"
          >
            <div>
              <input type="checkbox" v-model="backlog.ifcheck" :value="backlog.id" /><span
                :class="{ spanline: backlog.ifcheck }"
                >{{ backlog.content }}</span
              >
            </div>
            <div>
              <input type="button" value="删除" @click="splicarr(index)" v-show="isshow[index]" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 尾部 -->
      <div class="footer">
        <div style="margin-left: 20px">
          总计: <span>{{ sum }}</span>
        </div>
        <div>
          <input type="button" value="全部" @click="() => (filterType = 'all')" />
          <input type="button" value="未完成" @click="() => (filterType = 'undone')" />
          <input type="button" value="已完成" @click="() => (filterType = 'done')" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'

const backlogs = reactive([])
const icheck = ref('')
const prompt = ref('')
const sum = ref(0)
const filterType = ref('all') //过滤类型
const isshow = reactive({}) //用于显示删除按钮

watch(icheck, () => {
  if (icheck.value.length > 50) {
    prompt.value = '超过五十个字!'
  } else {
    prompt.value = ''
  }
})

function addCheck() {
  if (icheck.value.trim() === '') return alert('输入内容为空!')
  backlogs.push({ id: backlogs.length + 1, content: icheck.value, ifcheck: false })
  icheck.value = ''
  updateSum()
}
//过滤后的数组
const filterBacklogs = computed(() => {
  if (filterType.value === 'all') {
    return backlogs
  } else if (filterType.value === 'undone') {
    return backlogs.filter((item) => !item.ifcheck)
  } else if (filterType.value === 'done') {
    return backlogs.filter((item) => item.ifcheck)
  }
})
//更新总计
function updateSum() {
  sum.value = filterBacklogs.value.length
}
function splicarr(index) {
  backlogs.splice(index, 1)
  updateSum()
}
//监听过滤后的事项数组并自动更新总计数量并且将新待办事项本地存储
watch(filterBacklogs, () => {
  updateSum()
})
//缓存本地存储
function setLocal() {
  localStorage.setItem('backlogS', JSON.stringify(backlogs))
}
function getLocal() {
  const localArr = JSON.parse(localStorage.getItem('backlogS') || '[]')
  if (localArr) {
    console.log(localArr)
    backlogs.splice(0, backlogs.length, ...localArr) //将重新获取到的本地存储到的待办事项拷贝到backlogs
  }
}
function showdel(index) {
  isshow[index] = true
}
function hidddel(index) {
  isshow[index] = false
}
watch(filterBacklogs,()=>{
  setLocal()
})
//项目运行时更新计数并且调用本地存储的数据
onMounted(() => {
  getLocal()
  updateSum()
})
</script>

<style scoped>
.bigbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box {
  border: 1px solid;
  width: 900px;
  height: 600px;
  display: flex;
  flex-direction: column;
  background-color: #cdc2c2;
}
.header,
.footer {
  width: 100%;
  height: 56px;
  border: 1px solid;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer input[type='button'] {
  border: none;
  margin-right: 15px;
}
.backlog input[type='button'] {
  margin-right: 14px;
  background-color: red;
}
.backlog {
  flex: 1;
  border: 1px solid;
}
.backlog li {
  display: flex;
  margin-left: -34px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.i1 {
  width: 98%;
  height: 30px;
  border: none;
  border-radius: 14px;
  text-indent: 10px;
}
.sumbutton {
  background-color: pink;
}
.spanline {
  text-decoration: line-through;
  color: #eee;
}
</style>
